<template>
	<div>
		<ul>
			<items
      :id="item.id"
      :lv="0"
      :isShowUpDownArrow="isShow"
      :model="item"
      :key="index"
      :addItems="addItems"
      v-for="(item, index) in treeData"
      @moveU="moveUf(index)"
      @moveD="moveDf(index)"
      @dele = "dele"
      @add = "add"
      @modiName="modiName"
      @clickItem="clickItem"></items>
			<!-- 
        如果是涉及到当前的items则不用写两个方法，例如添加children
        如果是涉及到父级的话则需要些两个方法，例如排序，删除自身
				<li>
					<div>name</div>
					<ul>
						<items>
            </items>
					</ul>
				</li>
			-->
		</ul>
		<div><button @click="save">保存</button></div>
	</div>
</template>

<script>
  const treeData = [
    { id: 1, name: '指标1', weight: 1, parentid: null, childer: [
      { id: 11, name: '指标11', weight: 2, parentid: 1, childer: [
        { id: 111, name: '指标111', weight: 3, parentid: 11, childer: [] }
      ] }
    ]},
    { id: 2, name: "指标2", weight: 2, parentid: null, childer: [
    	{ id: 21, name: '指标21', weight: 3, parentid: 2, childer: [] },
    	{ id: 22, name: '指标22', weight: 3, parentid: 2, childer: [] },
    	{ id: 23, name: '指标23', weight: 3, parentid: 2, childer: [] }
    ] },
    { id: 3, name: "指标3", weight: 2, parentid: null, childer: [] },
    { id: 4, name: "指标4", weight: 2, parentid: null, childer: [] }
  ]
  import items from './treeNode.vue'
  export default{
    components: {
    	items
    },
    data () {
      return {
        treeData: treeData,
        isShow: null,
        addItems: []
      }
    },
    methods: {
      save () {
      	console.log(this.treeData)
      },
      moveUf (index) {
        if (index === 0) {
          alert('已经是第一位')
        } else {
          const obj = this.treeData[index]
          this.treeData.splice(index, 1)
          this.treeData.splice(index - 1, 0, obj)
        }
      },
      moveDf (index) {
        if (index === this.treeData.length - 1) {
          alert('已经是最后一位')
        } else {
          const obj = this.treeData[index]
          this.treeData.splice(index, 1)
          this.treeData.splice(index + 1, 0, obj)
        }
      },
      clickItem (isShow) {
        // 选中active逻辑： 在最外面给一个isShow，层层传进去，如果哪一个点击到了，就把id传到最外面，isShow为这个id，组件里面isShow===id
        this.isShow = this.isShow === isShow ? null : isShow
      },
      dele (id) {
        this.treeData = this.treeData.filter(u => u.id !== id)
      },
      add (fn, id) {
        var age = prompt("请输入你选择的id:","20");
        if (age) {
          this.addItems = [{
            name: 'add指标',
            weight: 2,
            id: 1223456789,
            parentid: id,
            childer: []
          }]
          fn(this.addItems)
        }
      },
      modiName (fn) {
        var age = prompt("请输入名字","");
        if (age) {
          fn(age)
        }
      }
    }
  }
</script>
